:root {
  --header-font: 'New Rocker', sans-serif;
  --button-font: 'Alata', sans-serif;
  --body-font:'Alata';
  --input-font:'Grenze';
  --colour-orange: #FF8C00;
  --colour-green: #016822;
  --colour-blue: #030168;
  --colour-text: #2e0303;
  --margins: 100px;
  --max-width: 1728px;
}

@media only screen and (max-width: 1728px) {
  :root {
    --margins: calc((100px * 0.33) + (100/1728*100vw * 0.67));
  }
}
@media only screen and (max-width: 800px) {
  :root {
    --margins: 20px;
  }
}

body{
  background: var(--colour-orange);
  font-family: var(--body-font);
}

svg, img{
  display: block;
}

header{
  position: absolute;
  width: 100%;
  padding: 15px;
  align-items: flex-start;
  top: 0;
  display: flex;
  justify-content: space-between;
  #loggedin-indicator{
    display: flex;
    align-items: center;
    column-gap: 0px;
    #userInfo{
      display: inline-block;
      font-weight: 600;
      color: var(--colour-text);
      font-size: 14px;
    }
    &:after, #log-out{
      background: url("/wp-content/themes/legendary/images/circle-xmark-solid.svg");
      /* content: ""; */
      width: 37px;
      height: 37px;
      display: block;
      position: relative;
      top: 1px;
      padding: 6px;
    }
    #log-out{
      background: initial;
      cursor: pointer;
    }
  }
  nav.main-navigation{
    display: flex;
    justify-content: flex-end;
    column-gap: 5px;
    width: initial;
    margin-left: auto;
    a{
      background: black;
      border-radius: 50px;
      padding: 4px;
      width: 40px;
    }
  }
}

.page{
  margin-bottom: 0px;
}

p{
  margin-top: 0px;
}

button{
  display: inline-block;
  background: initial;
  border: 2px solid var(--colour-text);
  cursor: pointer;
  border-radius: 50px;
  line-height: normal;
  padding: 17px 61px;
  font-family: var(--button-font);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--colour-text);
  &:hover, &:focus{
    border: 2px solid var(--colour-text);
  }
  &.white{
    border: 2px solid white;
    color: white;
    &:hover, &:focus{
      border: 2px solid white;
    }
  }
}

H1{
  font-family: var(--header-font);
  color: var(--colour-text);
  margin-top: 0px;
  font-size: 70px;
  @media only screen and (max-width: 800px) {
    font-size: 40px;
  }
}
h2{
  font-family: var(--input-font);
  color: var(--colour-text);
  margin: initial;
  margin-bottom: 0.8em;
  font-size: 40px;
  @media only screen and (max-width: 800px) {
    font-size: 29px;
  }
}

input[type="text"], textarea{
  background: white;
  border: initial;
  border-radius: 100px;
  font-weight: 600;
  font-size: 18px;
  padding: 15px 22px;
  color: var(--colour-text);
  font-family: var(--input-font);
  min-width: 0 !important;
  text-overflow: ellipsis;
  height: 57px;
  display: block;
  @media only screen and (max-width: 800px) {
    height: 57px;
  }
  &::placeholder {
    color: var(--colour-text);
    opacity: 1; /* Firefox */
  }

  &::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--colour-text);
  }
  &:focus, &:active{
    border: initial;
    outline: initial;
  }
  &:focus{
    &::placeholder {
      opacity: 0; /* Firefox */
    }

    &::-ms-input-placeholder { /* Edge 12 -18 */
      opacity: 0; /* Firefox */
    }
  }
}

textarea{
  height: initial;
}

button.circle-button{
  padding: initial;
  border: initial;
  width: 41.6px;
  &:hover, &:focus{
    border: initial;
  }
  &.white{
    svg {
        path {
            fill: white;
        }
    }
  }
}

.standard-section>.inside{
  max-width: var(--max-width);
  margin: auto;
  padding-inline: var(--margins);
}

.login-section{
  text-align: center;
  width: 100%;
  padding-top: 100px;
  .inside{
    padding-bottom: 60px;
  }
  &:not(.logged-in){
    padding-top: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  h1{
    margin-bottom: 23px;
  }
}

.delete-btn, .edit-btn{
  padding: 0px;
  border: initial !important;
  width: 25px;
  flex: 0 0 25px;
  height: 25px;
  background: url("/wp-content/themes/legendary/images/circle-xmark-solid.svg");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0px;
  margin-left: 0px;
  &.white{
    filter: invert(1);
  }
}
.edit-btn{
  background: url("/wp-content/themes/legendary/images/pen-solid.svg");
  background-color: black;
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}