:root{
    --shade-green:#606c38;
    --shade-yellow:#dda15e;
    --shade-orange:#bc6c25;
    --shade-white:#fefae0;
    --shade-yellow2:#e6ccb2;
    --shade-violet:#560bad;
    --shade-pink:#db00b6;
    --shade-white2:#f1faee;
    --black-shade:#343a40;
}
body,html{
    margin: 0;
    padding: 0;
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#F5F9E9;
}
#head{
    color:#3C0000;
    margin: 0;
    padding: 0;
    padding-top:30px;
    padding-bottom:10px;
}
#games{
    display: flex;
    flex-direction: column;
    height:80vh;
    flex-shrink: 0;
    width:60vw;
    border:2px solid black;
    border-radius:40px;
    justify-content: center;
    align-items: center;
    background-color:#D0CCD0;
    transition: all 0.3s ease;

    /*background-image: url('https://unsplash.it/800');*/
}
#tic{
    height:450px;
    width:450px;
    max-height:70%;
    max-width: 80%;
    padding:10px;
    display:grid;
    border:8px solid #e0b700;
    box-shadow: 0 0 0 8px darkblue;
    border-radius:30px;
    justify-items:center;
    align-items: center;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    background:linear-gradient(160deg,darkblue, dodgerblue, darkmagenta,mediumvioletred),conic-gradient(from 45deg,darkblue,dodgerblue,darkmagenta,mediumvioletred);
}
.tiktak{
    border: none;
    padding:5px;
    display:flex;
    height:85%;
    width:85%;
    opacity:0.7;
    color:white;
    font: bold 70px "Dancing Script", cursive;
    font-weight:bold;
    border-radius:20px;
    justify-content: center;
    align-items: center;
    background-color:#403d39;
}
.button{
    display: flex;
    border:none;
    border: 2px solid black;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:#C8FFBE;
    height:25px;
    width:75px;
    flex-basis:120px;
    border-radius: 10px;
    font-size:20px;
    align-items: center;
    justify-content: space-evenly;
    margin:10px;
    cursor: pointer;
}
.control{
    display:flex;
    flex-direction: row;
    margin:10px;
    padding:10px;
}
.button:hover{
    border:1px solid black;
    background-color: #126782;
    color:white;
    font-size:22px;
    box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2);
}

@media(max-width:800px){
    #games{
        width:100%;
        height:100%;
        border-radius:0;
    }
    #tic{
        transform: scale(0.7);
    }
    .tictak{
        font: bold 70px "Permanent Marker", Regular;
    }
}
#text{
    margin:0;
    padding:0;
    padding-bottom:10px;
    font-weight: bold;
    border-radius: 10px;
    color:var(--shade-orange);
    font-size:40px;
    align-items: center;
    display:none;
}