/* --------------- CSS RESET ----------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
  max-width: 100%;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
}

input,button,textarea,select {
  font: inherit;
  margin: 0;
}

iframe {
  border: 0;
}

::-moz-selection {
  /* Code for Firefox */
  color: white;
  background: var(--maincolor);
}

::selection {
  color: white;
  background: var(--maincolor);
}

html {
  width: 100%; height: 100%;
  scroll-behavior: smooth;
    box-sizing: border-box;
  --spacing:2rem;
  --spacingsmall:1rem;
  --maincolor:#3c4fc9;
  /* --maincolor: #43c045; */
  --secondarycolor:rgb(15, 15, 15);

}

/* --------------- MARQUEE ----------------- */

/* Marquee scrolling : https://www.bennadel.com/blog/4536-creating-a-marquee-effect-with-css-animations.htm */

#encours {
    z-index: 1000;
    color: white;
    font-size: 20px;
    position: fixed;
    top: 0;
    right: -67px;
    transform: rotate(35deg);
    display: flex ;
    overflow: hidden ;
    white-space: nowrap ;
    width: 500px ;
    height: 65px;
    align-items: center;
    background: repeating-linear-gradient(
  45deg,
  #5c6ddd,
  #5c6ddd 30px,
  /* #77cf78,
  #77cf78 30px, */
  var(--maincolor) 30px,
  var(--maincolor) 60px
);
}

.marquee_item {
    animation-duration: 4s ;
    animation-iteration-count: infinite ;
    animation-name: marquee-content ;
    animation-timing-function: linear ;
    padding: 5px 15px 5px 15px ;
}
.marquee:hover .marquee_item {
    animation-play-state: paused ;
}

@keyframes marquee-content {
    from {
        transform: translateX( 0% );
    }
    to {
        transform: translateX( -100% );
    }
}

/* --------------- LAYOUT ----------------- */

.hidden{
    display: none;
}

body{
    font-family: 'Inter';
    font-weight: 400;
}

h1, h2, h3{
    font-family: 'Azimut';
    font-size: 40px;
    color: var(--maincolor);
}

hr{
    color: var(--maincolor);
}

a{
    text-decoration: none;
    color: var(--maincolor);
    font-weight: bold;
}
a:hover{
    text-decoration: underline;
    transition: 0.2s;
}

#page{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing);
    margin: var(--spacing);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#projets{
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing)*2);
    overflow-y: scroll;
}

#descriptions{
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.description{
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.projet{
    display: flex;
    flex-direction: column;
    gap: var(--spacingsmall);
    cursor: pointer;
}

#contact{
  width: 100%;
  background: white;
  padding-top: var(--spacingsmall);
  position: sticky;
  bottom: 0;
  border-top: 2px solid var(--maincolor);
  /* z-index: 999; */
  /* padding-bottom: var(--spacing); */
}

.contactlinks{
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    column-gap: var(--spacingsmall);
}

.smallimg{
    max-width: 50%;
}

.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacingsmall);
    align-items: center;
}

.grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacingsmall);
    align-items: center;
}

.grid-small{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    gap: var(--spacingsmall);
}


.poeme{
    font-family: 'Azimut';
}

/* --------------- FONTZZZ ----------------- */
@font-face {
    font-family: 'Inter';
    src: url(fonts/Inter_18pt-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Inter';
    src: url(fonts/Inter_18pt-Bold.ttf);
    font-weight: bold;
}


@font-face {
    font-family: 'Azimut';
    src: url(fonts/Azimut-Italic.otf);
}


.mobile{
  display: none;
}

/* --------------- QUERIES ----------------- */

@media screen and (max-width:900px) {

.mobile{
    display: block;
}
.laptop{
    display: none;
}

#encours{
    height: 35px;
    font-size: 15px;
    right: 0;
    left: 0;
    width: auto;
    transform: rotate(0);
}
.marquee_item{
    padding: 5px 40px 5px 40px;
}

#page{
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--spacing)*2);
    overflow-y: scroll;
}
#descriptions{
overflow-y:visible;
}
#projets{
    gap: var(--spacing);
    padding-bottom: calc(var(--spacing)*4);
    overflow-y: visible;
}
#contact{
    position: fixed;
    bottom: 0;
    margin-left: calc(var(--spacingsmall) - var(--spacingsmall)*3);
    padding: var(--spacingsmall) var(--spacing) var(--spacingsmall) var(--spacing);
}
.contactlinks{
    align-items: center;
}
}