/* The almighty SUN */
    @property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }


    @media screen and (max-width: 767px){
    
    #sun {
      margin: 30 auto;
      padding: 2em;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 50%;
      position: relative;
      top: 160px;
      left: 85dvw;
      box-sizing: content-box;
    }

    }

     @media only screen and (max-width: 1000px){
    
    #sun {
      margin: 30 auto;
      padding: 2em;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 50%;
      position: relative;
      top: 100px;
      left: 85dvw;
      box-sizing: content-box;
    }

    }

     @media only screen and (max-width: 1100px){
    
    #sun {
      margin: 30 auto;
      padding: 2em;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 50%;
      position: relative;
      top: 50px;
      left: 85dvw;
      box-sizing: content-box;
    }

    }

         @media only screen and (min-width: 1100px){
    
    #sun {
      margin: 30 auto;
      padding: 2em;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 50%;
      position: relative;
      top: 0px;
      left: 85dvw;
      box-sizing: content-box;
    }

    }


    #sun::after, #sun::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background-image: conic-gradient(from var(--angle),#fbda7ec9, #fccb1cd6,#fbda7ec9, #ffd76ad9, #feecadd6, #fccb1cd9, #fbda7ec9, #feecadd1, #fbda7ec9, #fccb1cd5, #fbda7ec9,#feecadcb, #fbda7ec9);
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: 2;
      padding: 10px;
      border-radius: 50%;
      animation: 4s spin linear infinite;
    }

    #sun::before {
      filter:blur(2.5rem);
      opacity: 100%;

    }

    @keyframes spin{
      to {
        --angle: 1turn;
      }
    }

    /* The rest of the page */

    header {
        background-image: url(../images/Savannah\ sky_fade3.png);
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        height: 100dvh;
        width: 100dvw;
        padding: 0;
        margin: 0;
        left: 0px;
    }

    h1 {
        font-size: 4rem;
        color: #fff;
         display: flex;
        text-align: center;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 0.8;
        margin-top: 30px;
    }

    header > p {
        font-size: 1.5rem;
        color: #fff;
                display: flex;
        text-align: center;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;

    }

    #intro {
        clear: both;
        text-align: center;
        color: #e3dac2;
        font-size: 1.5rem;
        padding-bottom: 40px;
    }

    body {
        padding: 0;
        margin: 0;
        background: linear-gradient(#5b3408, #2e1b06, #5b3408, #2e1b06);
    }

    main {
        margin: 0 auto;
        margin-left: auto;
        margin-right: auto;
        max-width: 720px;
        padding-left: 20px;
        padding-right: 20px;
    }

    div{
        display: block;
    }

    h2 {
        font-size: 2rem;
        color: #FBD97E;
        text-align: center;
        line-height: 0.8;
        text-transform: uppercase;
        
    }

    h3 {
        font-size: 1.5rem;
        color: #e3dac2;
        line-height: 0.8;
        font-style:italic ;
        text-transform: none;

    }

    .left p {
        font-size: 1.2rem;
        color: #FBD97E;
        text-align: left;
        line-height: 1;
        text-transform: none;
        display: inline;
    }

        .right p {
        font-size: 1.2rem;
        color: #FBD97E;
        text-align: left;
        line-height: 1;
        text-transform: none;
        display: inline;
    }

    hr {
        clear: both;
        width: 90%;
        border: 1px solid #e3dac21f;
    }




    .left {
        display: block;
        height: max-content;
    }

    img#cheetah, img#rihno {
        width: 60%;
        display:block;
        float: inline-start;
        max-width: 400px;
    }



    

    .right {
        display: block;
        height: max-content;
    }

    .left > h3 {
        text-align: left;
        margin-left: 60px;
    }

     img#elephant, img#saigan {
        width: 50%;
        display:block;
        float: inline-end;
        max-width: 300px;

    }

        .right > h3 {
        text-align: right;
        margin-right: 60px;
    }


    #promptBox {
        border: 1px solid #FBD97E;
        background-color: #e3dac21f;
        padding: 30px;
        width: inherit;
        margin-top: 20px;
        gap: 10px;
        display: flex;          
        flex-direction: row;       
        align-items: center;     
        justify-content: flex-start;
        border-radius: 5px;
    }

    @media (max-width: 600px) {
  #promptBox {
    flex-direction: column;  
    align-items: center;      
    justify-content: center;  
    text-align: center;
  }}

#result {
  margin-top: 15px;
  padding: 10px 20px;
  border: 1px solid #e3dac2;
  border-radius: 3px; 
  font-size: 1rem;
  color: #e3dac2;   
  text-align: center;
  line-height: 1.2;
  width: inherit;  
  margin-left: auto;  
  margin-right: auto;
  box-sizing: border-box;
  background-color: #e3dac21f; 
  min-height: 3em;
}

#result.updated {
  border-color: #FBD97E;
}

    #userInput {
     padding: 10px 20px;
     border: 5px solid #e3dac2;
     border-radius: 3px;
     outline: none;  
     transition: border-color 0.3s, box-shadow 0.3s;
     font-size: 1rem;
     color: #FBD97E;
     text-align: center;
     line-height: 1;
     text-transform: none;
     width: 90%; 
     margin: 6px 0; 
}


#userInput:focus {
  border-color: #FBD97E;
}

button {
  padding: 10px 20px;
  background: #FBD97E;
  color: #000;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  height: 48px;
  margin-left: 0;
  width: max-content;
}


button:hover {
  background: #e3dac2;
}

footer {
        color: #FBD97E;
        font-size: 1.5rem;
        text-align: center;
    }