@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&display=swap);.turn{padding:.5625rem .9375rem .8125rem}.turn svg{height:1rem;position:relative;top:1px;width:1rem}.turn h2{letter-spacing:.88px;line-height:1.125rem}.button-restart{background-color:#aac0cb;background-color:var(--silver);border:none;box-shadow:inset 0 -4px 0 #6b8997;box-shadow:var(--shadow-silver-secondary);color:#1f3641;color:var(--semi-dark-navy);cursor:pointer;padding:.75rem;transition:color .5s ease-in-out,background-color .5s ease-in-out}.button-restart:where(:hover,:focus){background-color:#d9e7ed;background-color:var(--silver-active);color:#1f3741}.button-restart svg{height:1rem;width:1rem}@media only screen and (min-width:768px){.turn{padding:.8125rem 1.875rem 1.1875rem}.turn svg{height:1.25rem;position:static;width:1.25rem}.turn h2{letter-spacing:1px;letter-spacing:var(--letter-spacing-xs);line-height:1.25rem}.button-restart{padding:1rem}.button-restart svg{height:1.25rem;width:1.25rem}}.modal-container[data-animation=modal-closing]{-webkit-animation:modalFadeOut .4s ease-out;animation:modalFadeOut .4s ease-out;background-color:transparent}.modal-container[data-animation=modal-closing] .modal>*{-webkit-animation:modalItemsFadeOut .3s ease-out;animation:modalItemsFadeOut .3s ease-out;opacity:0}.modal-container[data-animation=modal-closing] .modal:before{-webkit-animation:slideOutRight .3s ease-out;animation:slideOutRight .3s ease-out;right:100%}.modal-container[data-animation=modal-closing] .modal:after{-webkit-animation:slideOutLeft .3s ease-out;animation:slideOutLeft .3s ease-out;left:100%}@-webkit-keyframes modalFadeOut{0%{background-color:rgba(0,0,0,.5)}}@keyframes modalFadeOut{0%{background-color:rgba(0,0,0,.5)}}@-webkit-keyframes modalItemsFadeOut{0%{opacity:1}}@keyframes modalItemsFadeOut{0%{opacity:1}}@-webkit-keyframes slideOutRight{0%{right:0}}@keyframes slideOutRight{0%{right:0}}@-webkit-keyframes slideOutLeft{0%{left:0}}@keyframes slideOutLeft{0%{left:0}}.modal-container{-webkit-animation:modalFadeIn .3s ease-in-out;animation:modalFadeIn .3s ease-in-out;background-color:rgba(0,0,0,.5);inset:0;position:absolute;z-index:10}@-webkit-keyframes modalFadeIn{0%{background-color:transparent}}@keyframes modalFadeIn{0%{background-color:transparent}}.modal{height:14.25rem;position:relative;width:100%}.modal>*{-webkit-animation:modalItemsFadeIn 1.5s ease-in-out;animation:modalItemsFadeIn 1.5s ease-in-out;opacity:1;z-index:1}.modal .result{letter-spacing:.88px}.modal .title{font-size:clamp(1.5rem,6vw,2.5rem)}.modal .title svg{height:100%;width:1.75rem}.modal:after,.modal:before{background-color:#1f3641;background-color:var(--semi-dark-navy);content:"";position:absolute;z-index:0}.modal:before{-webkit-animation:slideInRight .5s ease-in-out;animation:slideInRight .5s ease-in-out;inset:0 0 50%}.modal:after{-webkit-animation:slideInLeft .5s ease-in-out;animation:slideInLeft .5s ease-in-out;inset:50% 0 0}@-webkit-keyframes modalItemsFadeIn{0%{opacity:0}}@keyframes modalItemsFadeIn{0%{opacity:0}}@-webkit-keyframes slideInRight{0%{right:100%}}@keyframes slideInRight{0%{right:100%}}@-webkit-keyframes slideInLeft{0%{left:100%}}@keyframes slideInLeft{0%{left:100%}}@media only screen and (min-width:768px){.modal{height:16.625rem}.modal .title svg{width:4rem}}.board-box svg,.board-box:empty:where(:hover,:focus):before{margin:1.5rem auto 2rem;width:clamp(2.5rem,10vw,4rem)}.board{grid-gap:1.25rem;display:grid;gap:1.25rem;grid-template:repeat(3,1fr)/repeat(3,1fr)}.board-box{aspect-ratio:1/1;border:none;padding:0;position:relative;width:min(100%,8.75rem)}.board-box:empty{cursor:pointer;position:relative}.board-box:empty:where(:hover,:focus):before{aspect-ratio:1/1;background-size:cover;content:"";inset:0;position:absolute}.board-box:empty:where(:hover,:focus)[data-turn=X]:before{background-image:url(/FEM_tic-tac-toe-game/static/media/icon-x-outline.a591bdf22fd3be0addcb.svg)}.board-box:empty:where(:hover,:focus)[data-turn=O]:before{background-image:url(/FEM_tic-tac-toe-game/static/media/icon-o-outline.44ebb2196ec7043f1e17.svg)}.board-box.X-box{color:#31c4bf;color:var(--light-blue)}.board-box.X-box[data-win=true]{background-color:#31c4bf;background-color:var(--light-blue);box-shadow:inset 0 -8px 0 #118c87;box-shadow:var(--shadow-blue-primary);color:#1a2a32;color:var(--dark-navy)}.board-box.O-box{color:#f2b036;color:var(--light-yellow)}.board-box.O-box[data-win=true]{background-color:#f2b036;background-color:var(--light-yellow);box-shadow:inset 0 -8px 0 #cc8b13;box-shadow:var(--shadow-yellow-primary);color:#1a2a32;color:var(--dark-navy)}.board-box svg{height:auto}@media only screen and (min-width:768px){.board-box:empty:where(:hover,:focus):before{margin:2.375rem auto}.board svg{margin:2.375rem auto}}.score>*{line-height:1.25}.score h2{letter-spacing:.88px}@media only screen and (min-width:768px){.score>*{line-height:1.26}}.selection-container{background-color:#1f3641;background-color:var(--semi-dark-navy);border-radius:.9375rem;box-shadow:inset 0 -8px 0 #10212a;box-shadow:var(--shadow-navy-primary);padding:1.5rem 1.5rem 1.875rem;text-align:center}.selection-container>h2{line-height:1.25}.selection-container>p{line-height:1.26}.pick-mark{background-color:transparent;color:#aac0cb;color:var(--silver);cursor:pointer;position:relative;transition:color .5s linear;z-index:0}.pick-mark:where(:hover,:focus){background-color:rgba(167,190,200,.05)}.pick-mark:first-child:before{background-color:#aac0cb;background-color:var(--silver);border-radius:10px;content:"";height:100%;left:0;position:absolute;transition:left .5s ease-in-out;width:100%;z-index:-1}.pick-mark:first-child[aria-checked=false]:before{left:100%}.pick-mark[aria-checked=true]{color:#1a2a32;color:var(--dark-navy);cursor:default}*,:after,:before{box-sizing:border-box}*{margin:0}body,html{height:100%}body{-webkit-font-smoothing:antialiased;line-height:1.5}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}#__next,#root{isolation:isolate}:root{--light-blue:#31c4bf;--light-blue-active:#66eae6;--light-yellow:#f2b036;--light-yellow-active:#ffc861;--dark-navy:#1a2a32;--semi-dark-navy:#1f3641;--silver:#aac0cb;--silver-active:#d9e7ed;--shadow-primary:inset 0px -8px 0px;--shadow-yellow-primary:var(--shadow-primary) #cc8b13;--shadow-blue-primary:var(--shadow-primary) #118c87;--shadow-navy-primary:var(--shadow-primary) #10212a;--shadow-secondary:inset 0px -4px 0px;--shadow-yellow-secondary:var(--shadow-secondary) #cc8b13;--shadow-blue-secondary:var(--shadow-secondary) #118c87;--shadow-silver-secondary:var(--shadow-secondary) #6b8997;--shadow-navy-secondary:var(--shadow-secondary) #10212a;--letter-spacing-l:2.5px;--letter-spacing-m:1.5px;--letter-spacing-s:1.25px;--letter-spacing-xs:1px;--letter-spacing-regular:0.8px;--font-medium:500;--font-bold:700}body{background-color:#1a2a32;background-color:var(--dark-navy);font-family:Outfit,Futura,sans-serif}#root{display:grid;height:100vh;place-items:center;width:100%}.flow{display:flex;flex-direction:column;gap:2rem}@media only screen and (min-width:768px){.flow{gap:2.5rem}}.page-content{width:min(100% - 3rem,28.75rem)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.align-self-start{align-self:start}.justify-self-end{justify-self:end}.grid{display:grid}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.flex{display:flex}.flex-1{flex:1 1}.flex-col{flex-direction:column}.space-between{justify-content:space-between}.align-center,.flex-center{align-items:center}.flex-center{justify-content:center}.logo{align-self:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-16{gap:4rem}.fs-0{font-size:0}.fs-1{font-size:.25rem}.fs-2{font-size:.5rem}.fs-2\.5{font-size:.625rem}.fs-3{font-size:.75rem}.fs-3\.5{font-size:.875rem}.fs-4{font-size:1rem}.fs-5{font-size:1.25rem}.fs-6{font-size:1.5rem}.fs-8{font-size:2rem}.fs-16{font-size:4rem}.fw-medium{font-weight:500;font-weight:var(--font-medium)}.fw-bold{font-weight:700;font-weight:var(--font-bold)}.letter-xs{letter-spacing:1px}.letter-s{letter-spacing:1.25px}.letter-m{letter-spacing:1.5px}.letter-l{letter-spacing:2.5px}.uppercase{text-transform:uppercase}.color-light-blue{color:#31c4bf;color:var(--light-blue)}.color-light-yellow{color:#f2b036;color:var(--light-yellow)}.color-silver{color:#aac0cb;color:var(--silver)}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-3\.5{margin-top:.875rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-16{margin-top:4rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-16{margin-bottom:4rem}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-16{padding:4rem}.px-0{padding-inline:0}.px-1{padding-inline:.25rem}.px-2{padding-inline:.5rem}.px-2\.5{padding-inline:.625rem}.px-3{padding-inline:.75rem}.px-3\.5{padding-inline:.875rem}.px-4{padding-inline:1rem}.px-5{padding-inline:1.25rem}.px-6{padding-inline:1.5rem}.px-8{padding-inline:2rem}.px-16{padding-inline:4rem}.py-0{padding-block:0}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.py-2\.5{padding-block:.625rem}.py-3{padding-block:.75rem}.py-3\.5{padding-block:.875rem}.py-4{padding-block:1rem}.py-5{padding-block:1.25rem}.py-6{padding-block:1.5rem}.py-8{padding-block:2rem}.py-16{padding-block:4rem}.box-navy{background-color:#1f3641;background-color:var(--semi-dark-navy)}.box-navy[data-type=primary]{box-shadow:inset 0 -8px 0 #10212a;box-shadow:var(--shadow-navy-primary)}.box-navy[data-type=secondary]{box-shadow:inset 0 -4px 0 #10212a;box-shadow:var(--shadow-navy-secondary)}.bg-dark-navy{background-color:#1a2a32;background-color:var(--dark-navy)}.bg-semi-dark-navy{background-color:#1f3641;background-color:var(--semi-dark-navy)}.bg-light-blue{background-color:#31c4bf;background-color:var(--light-blue)}.bg-silver{background-color:#aac0cb;background-color:var(--silver)}.bg-light-yellow{background-color:#f2b036;background-color:var(--light-yellow)}.br-1\.5{border-radius:.375rem}.br-2\.5{border-radius:.625rem}.opacity{opacity:.5}@media only screen and (min-width:768px){.tablet\:align-self-center{align-self:center}.tablet\:letter-m{letter-spacing:1.5px}.tablet\:letter-l{letter-spacing:2.5px}.tablet\:gap-0{gap:0}.tablet\:gap-1{gap:.25rem}.tablet\:gap-2{gap:.5rem}.tablet\:gap-2\.5{gap:.625rem}.tablet\:gap-3{gap:.75rem}.tablet\:gap-3\.5{gap:.875rem}.tablet\:gap-4{gap:1rem}.tablet\:gap-5{gap:1.25rem}.tablet\:gap-6{gap:1.5rem}.tablet\:gap-8{gap:2rem}.tablet\:gap-16{gap:4rem}.tablet\:fs-0{font-size:0}.tablet\:fs-1{font-size:.25rem}.tablet\:fs-2{font-size:.5rem}.tablet\:fs-2\.5{font-size:.625rem}.tablet\:fs-3{font-size:.75rem}.tablet\:fs-3\.5{font-size:.875rem}.tablet\:fs-4{font-size:1rem}.tablet\:fs-5{font-size:1.25rem}.tablet\:fs-6{font-size:1.5rem}.tablet\:fs-8{font-size:2rem}.tablet\:fs-16{font-size:4rem}.tablet\:mt-0{margin-top:0}.tablet\:mt-1{margin-top:.25rem}.tablet\:mt-2{margin-top:.5rem}.tablet\:mt-2\.5{margin-top:.625rem}.tablet\:mt-3{margin-top:.75rem}.tablet\:mt-3\.5{margin-top:.875rem}.tablet\:mt-4{margin-top:1rem}.tablet\:mt-5{margin-top:1.25rem}.tablet\:mt-6{margin-top:1.5rem}.tablet\:mt-8{margin-top:2rem}.tablet\:mt-16{margin-top:4rem}.tablet\:mb-0{margin-bottom:0}.tablet\:mb-1{margin-bottom:.25rem}.tablet\:mb-2{margin-bottom:.5rem}.tablet\:mb-2\.5{margin-bottom:.625rem}.tablet\:mb-3{margin-bottom:.75rem}.tablet\:mb-3\.5{margin-bottom:.875rem}.tablet\:mb-4{margin-bottom:1rem}.tablet\:mb-5{margin-bottom:1.25rem}.tablet\:mb-6{margin-bottom:1.5rem}.tablet\:mb-8{margin-bottom:2rem}.tablet\:mb-16{margin-bottom:4rem}.tablet\:br-0{border-radius:0}.tablet\:br-1{border-radius:.25rem}.tablet\:br-2{border-radius:.5rem}.tablet\:br-2\.5{border-radius:.625rem}.tablet\:br-3{border-radius:.75rem}.tablet\:br-3\.5{border-radius:.875rem}.tablet\:br-4{border-radius:1rem}.tablet\:br-5{border-radius:1.25rem}.tablet\:br-6{border-radius:1.5rem}.tablet\:br-8{border-radius:2rem}.tablet\:br-16{border-radius:4rem}}.button{border:none;color:#1a2a32;color:var(--dark-navy);cursor:pointer;font-size:1rem;font-weight:700;font-weight:var(--font-bold);line-height:1.26;text-transform:uppercase;transition:background-color .3s ease}.button.yellow{background-color:#f2b036;background-color:var(--light-yellow)}.button.yellow:where(:hover,:focus){background-color:#ffc861;background-color:var(--light-yellow-active)}.button.blue{background-color:#31c4bf;background-color:var(--light-blue)}.button.blue:where(:hover,:focus){background-color:#66eae6;background-color:var(--light-blue-active)}.button.silver{background-color:#aac0cb;background-color:var(--silver)}.button.silver:where(:hover,:focus){background-color:#d9e7ed;background-color:var(--silver-active)}.button[data-type=primary]{border-radius:.9375rem;display:block;letter-spacing:1.25px;letter-spacing:var(--letter-spacing-s);padding:.875rem 0 1.375rem;width:100%}.button[data-type=primary].yellow{box-shadow:inset 0 -8px 0 #cc8b13;box-shadow:var(--shadow-yellow-primary)}.button[data-type=primary].blue{box-shadow:inset 0 -8px 0 #118c87;box-shadow:var(--shadow-blue-primary)}.button[data-type=secondary]{border-radius:.625rem;display:inline-block;letter-spacing:1px;letter-spacing:var(--letter-spacing-xs);padding:.9375rem 1rem 1.0625rem}.button[data-type=secondary].yellow{box-shadow:inset 0 -4px 0 #cc8b13;box-shadow:var(--shadow-yellow-secondary)}.button[data-type=secondary].silver{box-shadow:inset 0 -4px 0 #6b8997;box-shadow:var(--shadow-silver-secondary)}@media only screen and (min-width:768px){.button[data-type=primary]{font-size:1.25rem;line-height:1.26;padding:1.0625rem 0 1.5625rem}}
/*# sourceMappingURL=main.8e628b1e.css.map*/