/*
Theme Name: t4
Author: mrPefr
Version: 1.0
*/

*{
    box-sizing: border-box;
    margin: 0;
    font-family: 'Dosis', sans-serif;
}

header svg{
    width:50px;
    height:50px;
}
footer svg{
    height:1.5rem;
}

body{
    overflow-x: hidden;
}


header, main, footer{
    min-height:20vh;
    width:100%;
  

}

header h1{
    color:#000;
    font-size:1.7rem;
    margin-right: 10px;
}
header{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:2%;
    gap:20px;
    border-bottom:1px solid #eee;
}

main{
    min-height: 20vh;
    display: grid;
    place-items: center;
    text-align: center;

}

footer div{
    padding:3%;
    border:1px solid #eee;
    font-size:1.5rem;
    display:grid;
    place-items: center;
    padding:3%;
    cursor: pointer;
    color:#202020;
}


.spinner{
    border-top:2px solid #fff;
    width:100px;
    height:100px;
    margin:auto;
    border-radius:50%;
    animation:spin 1s infinite linear;

   /* 
    rad för rad...
    animation-name:spin;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;*/
  }

  img{
    max-width: 100%;
  }

  .mainContent{
    display:grid;
    grid-template-areas: 'main';
    place-items: center;
    width:100%;
/*     margin-top:4vh;
    margin-bottom:4vh; */
    border-radius: 4px;
    min-height:max-content;


  }
  .mainContent > *{
    grid-area:main;
    color:#fff;
  }



  .info{
    background-color:rgba(30, 30, 30, 0.9);
    padding:2%;

    width:95%;
    margin:auto;
    margin-bottom: 1rem;
  }

footer a{
    color: inherit;
    text-decoration: none;
}

  
  @keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }


@media (min-width:600px){


    .info{
        background-color:transparent;
      }

    footer{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
    }


    main{
        min-height: 60vh;
          
    background-image: url("img/b1.jpg");

    background-color: #101010;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
      
    }
    .mainContent{
        display:grid;
        grid-template-areas: 'main';
        place-items: center;
        width:50%;
        background-color:rgba(30, 30, 30, 0.9);
        border-radius: 4px;
        margin-top:10px;
        margin-bottom: 10px;
      }

      .mainContent img{
        display:none;
      }

}