@font-face {
  font-family: mainFont;
  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: textFont;
  src: url("fonts/Switzer-Regular.otf");
}

:root {
  --mainColor: black;
  --backColor: rgb(255, 204, 0);
  /* --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);
  font-family: mainFont;
  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-family: mainFont;
    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{
    color: var(--backColor);
    background-color: var(--mainColor);
    transition: var(--transition);
    text-decoration: none;
}

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;
}
#name span {
  flex: 1;
  align-content: center;
}

#intro {
  width: 100%;
  background-color: var(--mainColor);
  color: var(--backColor);
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22vw;
  padding: var(--mainMarge);
  background-position: center;
  background-size: cover;
}

#profil{border-radius: 100%;}

video{
  width: 100%;
}

/* 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: relative;
        top: inherit;
      }

      #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);
    }
}