/*Set up the background colour, default text colour and font */
body {
    background-color: #071821;
    color: #86c06c;
    font-family:Arial, Helvetica, sans-serif;
    align-items: center;
}

/* Headings */
h1 {
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
}
ul {
    list-style-type: none;
}
iframe {
    border: 0px;
}
#wrapper {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
/* p */
p {
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    font-family: Liberation Serif;
}
a {
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    font-family: Liberation Serif;
    color:#86c06c;
    font-style: normal
}
/*p1*/
h5 {
    text-align: center;
    font-size: 2em;
    font-family: Arial, Helvetica, sans-serif
}
h3:hover {
    transform: scale(90%);
}
/*This makes the big circle around my logo */
#test1 {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 33.%; /*I don't know why the . after 33 is important but it is*/
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 450px;
    width: 450px;
    border: 10px solid #86c06c;
    padding: 5px;
    border-radius: 50%;
    position: relative;
    /*margin-left: auto;
    margin-right: auto;*/
}

#gamecontent {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 33.%;
    /*I don't know why the . after 33 is important but it is*/
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 450px;
    width: 450px;
    border: 10px solid #86c06c;
    padding: 5px;
    border-radius: 5%;
    position: relative;
    /*margin-left: auto;
    margin-right: auto;*/
}

/* Setting a left and right div to take up a third of the screen*/
#leftcontent{
    display:flex;
    flex-basis: 33%;
    text-align:center;
    justify-content: center;
}

#rightcontent {
    display: flex;
    flex-basis: 33%;
    text-align: center;
    justify-content: center;
}

#leftdiv {
    align-items: left;
    display: flex;
    border: 5px solid;
}


/* This is the text that will be attached to the button*/
/*ABOUT logo*/
#circletext {
    display: none;
    color: #e0f8cf;
    position: fixed;
    margin-top: 100px;
    margin-left:-10px;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
}
span:hover + #circletext {
    display: block;
    color: #e0f8cf;
}


#circletext2 {
    display: none;
    color: #e0f8cf;
    position: fixed;
    margin-top: 100px;
    margin-left: -5px;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
}

span:hover+#circletext2 {
    display: block;
    color: #e0f8cf;   
}

#circletext3 {
    display: none;
    color: #e0f8cf;
    position: fixed;
    margin-top: 100px;
    margin-left: -10px;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
}

span:hover+#circletext3 {
    display: block;
    color: #e0f8cf;
}

/* MAIN logo*/
#circletext4 {
    display: none;
    color: #e0f8cf;
    position: fixed;
    margin-top: 100px;
    margin-left: -0px;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
}

span:hover+#circletext4 {
    display: block;
    color: #e0f8cf;
}

/* To stop it spinning the rotation doesn't actually go anywhere */
@keyframes rot {
    from {
        transform: rotate(0deg) translate(230px) rotate(0deg);
    }

    to {
        transform: rotate(-360deg) translate(230px) rotate(360deg);
    }
}

.circlepath {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    animation: rot 9s infinite linear;
    position: absolute;
    animation-play-state: running;
}

.circlepath-3s {
    animation-delay: -3s;
}

.circlepath-6s {
    animation-delay: -6s;
}

.circlestop {
    animation-play-state: paused;
}

.circlepath:hover  {
    .circlepath {
        animation-play-state: paused;
    }
}

#test1:has(.rotate:hover) .rotate {
    animation-play-state: paused;
}