@font-face {
  font-family: mainFont1;
  src: url("fonts/Flowa.ttf");
  /* font-variation-settings: 'wdth' 50 150;
    font-variation-settings: 'SCAL' 50 150;
    font-variation-settings: 'wght' 100 700; */
}

@font-face {
  font-family: mainFont2;
  src: url("fonts/RITMATO.ttf");
  /* font-variation-settings: 'wdth' 50 150;
    font-variation-settings: 'SCAL' 50 150;
    font-variation-settings: 'wght' 100 700; */
}

@font-face {
  font-family: mainFont3;
  src: url("fonts/stensign.ttf");
  /* font-variation-settings: 'wdth' 50 150;
    font-variation-settings: 'SCAL' 50 150;
    font-variation-settings: 'wght' 100 700; */
}

@font-face {
  font-family: mainFont4;
  src: url("fonts/fragmentVF.ttf");
  /* font-variation-settings: 'wdth' 50 150;
    font-variation-settings: 'SCAL' 50 150;
    font-variation-settings: 'wght' 100 700; */
}

@font-face {
  font-family: mainFont5;
  src: url("fonts/mycelis-VF.ttf");
  /* font-variation-settings: 'wdth' 50 150;
    font-variation-settings: 'SCAL' 50 150;
    font-variation-settings: 'wght' 100 700; */
}


@font-face {
  font-family: textFont;
  src: url("fonts/Switzer-Regular.otf");
}

:root {
  --mainColor: rgb(85, 83, 100);
  --backColor: rgb(255, 169, 145);
  /* --secondColor: rgb(25, 211, 25); */

  --mainSize: 18px;
  --titleSize: 80px;
  --subSize: 14px;

  --mainMarge: 2.5vw;
  --bigMarge: 10vh;

  --transition: all 100ms ease-in-out;
  --border : 2px solid var(--mainColor);

  --variable-axis: 0;
}

* {
  box-sizing: border-box;
}
body {
  background-color: var(--backColor);
  color: var(--mainColor);
  font-family: textFont;
  line-height: 1.2em;
  overflow-x: hidden;
}

h1 {
  font-size: var(--titleSize);
  margin-bottom: var(--mainMarge);
  line-height: 1em;
}

p {
  font-family: textFont;
  font-size: var(--mainSize);
}

.mainFont {
  font-family: mainFont;
  font-variation-settings: "wght" 500;
}

.chapitre {
  margin: var(--mainMarge);
}

.textarea{
    /* padding-top: var(--mainMarge);
    padding-bottom: var(--mainMarge); */
    font-size: 15vw;
    resize: none;
    overflow: auto;
    border: none;
    outline: none;
    text-decoration: none;
    background-color: var(--backColor);
    color: var(--mainColor);
    line-height: initial;


    font-variation-settings: "wght" 500;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  width: 100%;
  gap: var(--mainMarge);
  margin-top: var(--mainMarge);
}
.flex-object {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: sticky;
  top: calc(var(--mainMarge)*2);
  height: fit-content;
}
.flex-object img {
  width: 100%;
  height: auto; /* Ensures proper aspect ratio */
}
.imgdesc {
  font-size: var(--subSize);
  margin-top: 10px;
  padding-top: 5px;
  text-align: left;
  border-top: var(--border)
}

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

#credit a{
    color: var(--backColor);
    background-color: var(--mainColor);
    transition: var(--transition);
    text-decoration: none;
}

#credit a:hover{
    color: var(--mainColor);
    background-color: var(--backColor);
    text-decoration: underline;
}


.display-area {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--mainColor);
    color: var(--backColor);
    height: calc(40vw - var(--mainMarge)*4);
    font-size: 22vw;
    font-weight: bold;
}

.character-viewer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mainMarge)*2), 1fr));
    gap: 10px;
    font-family: mainFont;
}

.glyph {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--backColor);
    border: var(--border);
    height: calc(var(--mainMarge)*2);
    font-size: calc(var(--mainSize)*2);
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.glyph:hover {
    background-color: var(--mainColor);
    color: var(--backColor);
}

.margin-grid{
    margin-top: calc(var(--mainMarge)*2);
}

#name {
  display: flex;
  justify-content: space-between;
  margin-left: var(--mainMarge);
  margin-right: var(--mainMarge);
  height: var(--mainMarge);
  position: fixed;
  width: calc(100% + var(--mainMarge)*-2);
  z-index: 5;
  color: white;
  border-bottom: 2px solid white;
  mix-blend-mode: exclusion;
  top: 0;
}
#name span {
  flex: 1;
  align-content: center;
}

.intro {
  width: 100%;
  background-color: var(--mainColor);
  color: var(--backColor);
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22vw;
  padding: var(--mainMarge);
  background-position: center;
  background-size: cover;
  transition: background-image 0.5s ease, background-color 0.5s ease;
  overflow: hidden;
  cursor: pointer;
}

.intro:hover {
  background-size: cover;
  background-position: center;
}

.font1{
  color: #0046ff;
  background-color: black;
  font-family: mainFont1;
  font-size: 18vw;
}
  .font1:hover{
    background-image: url('medias/img landscape.jpg');
  }
.font2{
  color: #edff00;
  background-color: #424242;
  font-family: mainFont2;
  font-size: 17vw;
}
.font2:hover{
  background-image: url('medias/01_landscape.jpg');
}
.font3{
  color: black;
  background-color: rgb(255, 204, 0);
  font-family: mainFont3;
  font-size: 18vw;
}
.font3:hover{
  background-image: url('medias/Landscape.png');
}
.font4{
  color: #4c4416;
  background-color: #77549f;
  font-family: mainFont4;
  font-size: 17vw;
}
.font4:hover{
  background-image: url('medias/1Tavola\ disegno\ 5.png');
}
.font5{
  color: #F5F4F5;
  background-color: #191611;
  font-family: mainFont5;
  font-size: 17vw;
}
.font5:hover{
  background-image: url('medias/landscapeimage.jpg');
}

.description{
  width: 50%;

}

/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {

    :root {
        --mainSize: 18px;
        --titleSize: 80px;
        --subSize: 14px;
      
        --mainMarge: 5vw;
        --bigMarge: 10vh;
      
        --transition: all 100ms ease-in-out;
        --border : 2px solid var(--mainColor);
      
        --variable-axis: 0;
      }


    .flex-container {
        flex-direction: column;
      }
    .flex-object {
        position: initial;
      }

      #display-container{
        display: none;
      }
    
    #name{
        height: auto;
    }
    
    .character-viewer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--mainMarge)*5), 1fr));
        gap: 10px;
        font-family: mainFont;
    }

    .glyph {
        height: calc(var(--mainMarge)*5);
        font-size: calc(var(--mainSize)*5);
    }
    
    
    .glyph:hover {
        background-color: var(--mainColor);
        color: var(--backColor);
    }

    .description{
      width: 100%;
    
    }
}